<!doctype html>
<html lang="en">
<head>
	<title>LineChart - AJAX Data</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="description" content="%description%" />
	<meta name="keywords" content="" />
	<meta name="author" content="ComponentOne" />
	
	<link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
	
	<script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
	<script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
	<script src="../../external/globalize.min.js" type="text/javascript"></script>
	<script src="../../external/raphael-min.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.raphael.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijchartcore.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijlinechart.js" type="text/javascript"></script>
	<script id="scriptInit" type="text/javascript">
		$(document).ready(function () {
			var netflx = "http://odata.netflix.com/Catalog/Genres('Horror Movies')/Titles?$inlinecount=allpages&$callback=callback&$top=10&$format=json&$orderby=AverageRating desc";

			$.ajax({
				dataType: "jsonp",
				url: netflx,
				jsonpCallback: "callback",
				success: callback
			});
		});

		function callback(result) {
			// unwrap result
			var names = [];
			var ratings = [];

			var movies = result["d"]["results"];

			for (var i = 0; i < movies.length; i++) {

				names.push(movies[i].Name);
				ratings.push(movies[i].AverageRating);
			}

			$("#wijlinechartDefault").wijlinechart({
				axis: {
					y: {
						text: "Average Rating",
						min: 0,
						max: 5,
						autoMin: false,
						autoMax: false
					},
					x: {
						text: "",
						labels: {
							style: {
								rotation: -45
							}
						}
					}
				},
				hint: {
					content: function () {
						return this.x + '\n ' + this.y + '';
					}
				},
				header: {
					text: "Top 10 Movies by Genre - Netflix OData"
				},
				seriesList: [
					{
						label: "Horror",
						legendEntry: true,
						fitType: "spline",
						data: {
							x: names,
							y: ratings
						},
						markers: {
							visible: true,
							type: "circle"
						}
					}
				]
			});
		}

	   
	</script>
</head>
<body class="demo-single">
	<div class="container">
		<div class="header">
			<h2>
				External Data</h2>
		</div>
		<div class="main demo">
			<!-- Begin demo markup -->
			<div id="wijlinechartDefault" style="width: 756px; height: 475px" class="ui-widget ui-widget-content ui-corner-all">
			</div>
			<!-- End demo markup -->
			<div class="demo-options">
				<!-- Begin options markup -->
				<!-- End options markup -->
			</div>
		</div>
		<div class="footer demo-description">
			<p>
				This sample illustrates how to create a chart using data from an external data source. In this example, we are using data from the Netflix OData feed.
			</p>
			<ul>
				<li>Data URL: <a href="http://odata.netflix.com/Catalog/Genres('Horror Movies')/Titles?$inlinecount=allpages&$callback=callback&$top=10&$format=json&$orderby=AverageRating desc">http://odata.netflix.com/Catalog/Genres('Horror Movies')/Titles?$inlinecount=allpages&$callback=callback&$top=10&$format=json&$orderby=AverageRating desc</a> </li>
				<li>API Documentation: <a href="http://developer.netflix.com/docs/oData_Catalog">http://developer.netflix.com/docs/oData_Catalog</a> </li>
			</ul>
		</div>
	</div>
</body>
</html>
